<!-- 入库产品记录 -->
<template>
  <div class="pagePadding home">
    <Form inline class="formMarginBtm20 clearfix">
      <!-- 供应商名称 -->
      <FormItem>
        <span>供应商名称：</span>
        <Select placeholder="请选择" v-model="queryFrom.supplier_id" clearable filterable class="iviewIptWidth250" @on-clear="clearSupply" @on-change="getSupply">
          <Option v-for="(item, index) in supllyList" :value="item.supplier_id" :key="index">{{ item.supplier_name }}</Option>
        </Select>
      </FormItem>
      <!-- 产品名称 -->
      <FormItem class="marginLeft40">
        <span>产品名称：</span>
        <Select placeholder="请选择" v-model="queryFrom.product_name" clearable filterable class="iviewIptWidth250"  @on-clear="clearProduct" @on-change="getSKUSelect">
          <Option v-for="(item, index) in productList" :value="item.name" :key="index">{{ item.name }}</Option>
        </Select>
      </FormItem>
      <!-- 货号/SKU -->
      <FormItem class="marginLeft40">
        <span>规格/SKU：</span>
        <Select placeholder="请选择" v-model="queryFrom.specification_id_str" clearable filterable multiple :max-tag-count="queryFrom.specification_id_str.length == 1 ? 1 : 0"  class="iviewIptWidth307">
          <Option v-for="(item, index) in modelList" :value="item.model_name" :key="index" :label="item.model_name + '-' + item.item_number">
            <span>{{ item.model_name }}</span>
            <span style="float: right; color: #ccc; margin-right: 20px;">{{ item.item_number }}</span>
          </Option>
        </Select>
      </FormItem>
      <!-- 入库人 -->
      <FormItem>
        <span>入库人：</span>
        <Select placeholder="请选择" v-model="queryFrom.create_by" clearable filterable class="iviewIptWidth250">
          <Option v-for="(item, index) in userList" :value="item.id" :key="index">{{ item.user_name }}</Option>
        </Select>
      </FormItem>
      <!-- 入库时间 -->
      <FormItem >
        <span>入库时间：</span>
        <DatePicker type="date" placeholder="请选择" class="iviewIptWidth250" format="yyyy-MM-dd" clearable @on-change="changeTime($event, 1)"></DatePicker>
        <span style="padding: 0 10px;">至</span>
        <DatePicker type="date" placeholder="请选择" class="iviewIptWidth250" format="yyyy-MM-dd" v-model="queryFrom.create_time_end" clearable :options="options" @on-change="changeTime($event, 2)"></DatePicker>
      </FormItem>
      <!-- 按钮 -->
      <FormItem class="po-create-number marginRight0" :label-width="20">
        <span class="pageBtn finger btnSure" @click="searchItem">查询</span>
        <span class="pageBtn finger btnSure marginLeft20" @click="setupStatus = true">设置</span>
      </FormItem>
    </Form>
    <!-- <Table :productList="listColumns" :productData="listData" :pages="pages" @change-page="changePage" totalText="条记录" :total="total">
      <div slot="summary" class="summary">
        总数量：<span class="color389">{{ total_number }}</span> 合计金额：<span class="color389">¥{{ total_amount }}</span>
      </div>
    </Table> -->
    <div class="clearfix tabDiv" ref="tabDiv">
      <Spin fix v-if="loading"></Spin>
      <Table  :height="tableHeight" :productList="listColumns" :productData="listData" :option_page="option_page" highlight-row border :rowClass="rowClassName"></Table>
    </div>
    <div class="summary" v-if="listData && listData.length > 0">
      总数量：<span class="color389 marginRight20">{{ total_number }}</span> 合计金额：<span class="color389">{{ $utils.formatMoney(total_amount, true) }}</span>
    </div>
    <div class="pages" v-if="listData !== null && listData.length > 0 && total">
      <Page v-if="pages && total <= 60" :total="total" :current="pages.page" @on-change="changePage" class="fl" />
      <Page v-if="pages && total > 60" :total="total" :current="pages.page" @on-change="changePage" show-elevator class="fl" />
      <div class="fr totalFont" v-if="total">共计{{ total }}条记录</div>
    </div>
    <!-- 动态表头弹窗 -->
    <table-setup v-if="setupStatus" :pageList="titleList" :option_page="option_page" @cancleBtn="setupStatus = false" @sureBrn="sureSetup"></table-setup>
  </div>
</template>

<script>
import TableSetup from '@/components/tableSetup'
import Table from '@/components/table'
export default {
  name: 'recordIncomingProducts',
  components: {
    Table,
    TableSetup,
  },
  data() {
    return {
      loading: false,
      tableHeight: 0,
      template_id: '',
      template_type: 9,
      typeList: [],
      status: false,
      supllyList: [],
      titleList: [],
      option_page: '34',
      // 动态表头弹窗
      setupStatus: false,
      // 表格数据
      listData: [],
      // 表格头部标题
      listColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 75,
        },
        {
          title: '产品名称',
          key: 'product_name',
          align: 'center',
          width: 260,
        },
        {
          title: '注册证号/备案凭证号',
          key: 'licence_code',
          align: 'center',
          width: 230,
        },
        {
          title: '规格型号',
          key: 'model_name',
          align: 'center',
          width: 136,
        },
        {
          title: '货号/SKU',
          key: 'item_number',
          align: 'center',
          width: 136,
        },
        {
          title: '条形码',
          key: 'bar_code',
          align: 'center',
          width: 200,
        },
        {
          title: '批号',
          key: 'batch_number',
          align: 'center',
          width: 200,
        },
        {
          title: '有效期',
          key: 'valid_period',
          align: 'center',
          width: 136,
        },
        {
          title: '厂家',
          key: 'factory_name',
          align: 'center',
          width: 260,
        },
        {
          title: '数量',
          key: 'quantity',
          align: 'center',
          width: 160,
        },
        {
          title: '入库人',
          key: 'create_by',
          align: 'center',
          width: 260,
        },
        {
          title: '入库时间',
          key: 'create_time',
          align: 'center',
          width: 136,
        },
        {
          title: '入库仓库',
          key: 'warehouse_name',
          align: 'center',
          width: 136,
        },
      ],
      // 查询参数
      queryFrom: {
        specification_id_str: '',
        product_id: '', // 产品名称
        model_name: '', // 规格名称
        item_number: '', // 货号
        create_by: '', // 入库人
        create_time_start: '', // 起始入库时间
        create_time_end: '', // 截止入库时间
      },
      /* 搜索对象，分页时需要 */
      searchObj: {},
      pages: {
        rows: 10,
        page: 1,
      },
      total: 0,
      // 条目总数
      total_amount: 0 /* 合计金额 */,
      total_number: 0 /* 合计数量 */,
      // 入库人下拉
      warehousePeople: [],
      // 产品下拉
      productSelect: [],
      // 产品规格下拉
      SKUSelect: [],
      // 规格id
      code_id: '',
      // 产品id
      product_id: 0,
      // 时间设置
      options: {},
      // 规格选择禁用
      paging: null,
      // 入库人
      userList: [],
      modelList: [],
      productList: [],
    }
  },
  methods: {
    getSupllyList() {
      this.$http.get(this.$api.warehouseReceiptProductsSkuList, false).then(res => {
        this.supllyList = res.data
      })
    },
    surePrint() {
      let api_info = `${this.$api.inputProductRecode.url}?`
      for (let objName in this.queryFrom) {
        if (this.queryFrom[objName]) {
          api_info = api_info + `${objName}=${this.queryFrom[objName]}&`
        }
      }
      if (!this.template_type) {
        this.$Message.warning('请选择模版类型')
        return
      }
      if (!this.template_id) {
        this.$Message.warning('请选择模版名称')
        return
      }
      this.$http.downFile(this.$api.templatePrint, { template_id: this.template_id, api_info: api_info, paging: this.paging }, true).then(res => {
        this.status = false
        this.$Message.success('导出成功')

        let blob = new Blob([res.data], { type: 'application/x-xlsx' })
        const aLink = document.createElement('a')
        aLink.href = URL.createObjectURL(blob)
        aLink.download = '入库产品记录.xlsx'
        aLink.click()
      })
    },
    // 发送请求获取 模版名称
    typeChange(e) {
      if (!e) return
      this.$http.get(this.$api.templateInfo, { template_type: e }, false).then(res => {
        this.typeList = res.data
      })
    },
    sureSetup(val) {
      this.queryOption()
    },
    // 获取表格表头
    queryOption() {
      this.loading = true
      this.$http
        .get(this.$api.systemOptionItem, { option_page: this.option_page })
        .then(res => {
          this.titleList = res.data.enable
          localStorage.setItem('adminTtitleList', JSON.stringify(res.data.list))
          for (let i = 0; i < this.titleList.length; i++) {
            if (this.titleList[i].show) {
              this.titleList[i].key = this.titleList[i].data_col
              this.titleList[i].width = this.titleList[i].column_width
              this.titleList[i].align = 'center'
              this.titleList[i].resizable = true
            }
          }
          this.listColumns = []
          this.listColumns.unshift({
            title: '序号',
            type: 'index',
            align: 'center',
            width: 60,
          })
          this.listColumns = [...this.listColumns, ...this.titleList]
          this.listColumns = JSON.parse(JSON.stringify(this.listColumns))
        })
        .then(() => {
          this.getTableList(this.pages, {})
        })
    },
    // 反冲成功的行标红
    rowClassName(row, index) {
      if (row.recoil_status == 1) return 'redRow'
      return ''
    },
    /* 获取表格数据 */
    getTableList(pages, searchItem) {
      this.loading = true
      let obj = {}
      Object.assign(obj, pages, searchItem)
      this.$http.get(this.$api.WinOrderRecord, obj, false).then(res => {
        this.loading = false
        if (res.status) {
          this.listData = res.data
          this.total = res.total
          this.total_amount = res.total_amount
          this.total_number = res.total_number
          // 处理动态表头页面列表数据
          this.listData = this.$utils.dynamicHeaderList(this, this.listData)
          this.$nextTick(() => {
            this.tableHeight = this.$refs.tabDiv.offsetHeight
            if(this.listData.length == 0) {
              this.tableHeight = 0
            }
            this.$forceUpdate()
          })
        }
      })
    },
    /* 分页方法 */
    changePage(e) {
      this.pages.page = e
      this.getTableList(this.pages, this.searchObj)
    },
    /* 搜索产品 */
    searchItem() {
      let obj = {}
      obj.product_name = this.queryFrom.product_name
      obj.create_by = this.queryFrom.create_by
      obj.create_time_start = this.queryFrom.create_time_start
      obj.create_time_end = this.queryFrom.create_time_end
      obj.supplier_id = this.queryFrom.supplier_id
      obj.model_name = this.queryFrom.specification_id_str.length > 0 ? this.queryFrom.specification_id_str.join(',') : '',
      this.searchObj = obj
      this.pages = { page: 1, rows: 10 }
      this.getTableList(this.pages, obj)
    },
    // 获取入库人下拉
    getWarehousePeople() {
      // 经手人下拉
      this.$http.get(this.$api.publicSpecialUser, { user_type: '1' }, false).then(res => {
        this.userList = res.data
      })
    },
    // 供应商改变
    getSupply(e) {

      this.queryFrom.product_name = ''
      this.queryProductSelect(e)
    },
    // 获取供应商下的产品下拉选择
    queryProductSelect(id) {
      this.$http.get(this.$api.productSelect, { supplier_id: id ,win_record_page: '1' }, false).then(res => {
        this.productList = res.data
      })
      // 同时获取此供应商下的所有规格型号产品
      this.queryProductCodeSelect()
    },
    // 获取供应商下指定产品下的规格型号
    queryProductCodeSelect(id) {
      this.$http.get(this.$api.productCodeSelect, { product_id: id, supplier_id: this.queryFrom.supplier_id,win_record_page: '1' }, false).then(res => {
        this.modelList = res.data
      })
    },
    // 获取产品规格下拉
    getSKUSelect(val) {
      this.queryFrom.specification_id_str = []
      // 获取产品id
      let product_id = ''
      this.productList.forEach(item => {
        if(item.name == val) {
          product_id = item.product_id
        }
      }) 
      this.queryProductCodeSelect(product_id)
    },
    clearSupply() {
      this.queryFrom.supplier_id = null
      this.queryFrom.product_id = null
      this.queryFrom.specification_id_str = ''
      this.SKUSelect = []
    },
    clearProduct() {
      this.queryFrom.product_id = null
      this.queryFrom.specification_id_str = ''
      this.SKUSelect = []
    },
    clearsku() {
      this.queryFrom.specification_id_str = null
    },
    // 时间改变
    changeTime(e, num) {
      if (num == 1) {
        let that = this
        that.queryFrom.create_time_start = e
        that.queryFrom.create_time_end = ''
        that.options = {
          disabledDate(date) {
            return date && date.valueOf() < new Date(that.queryFrom.create_time_start)
          },
        }
      } else {
        this.queryFrom.create_time_end = e
      }
    },
  },
  created() {
    this.getSupllyList()
    this.queryOption()
    this.getSupply()
    this.getWarehousePeople()
  },
}
</script>

<style scoped lang="less">
.home {
  display: flex;
  flex-direction: column;
}
// 表格
.tabDiv {
  flex: 1;
  overflow-y: auto;
  height: 100%;
  .totalFont {
    font-size: 14px;
  }
  .pages {
    margin-top: 10px;
    overflow: hidden;
    line-height: 32px;
  }
}
.paddingBot40px {
  padding-bottom: 40px;
}
.item {
  display: flex;
  align-items: center;
  justify-items: center;
  margin-bottom: 20px;
  .itemTitle {
    width: 100px;
    color: #000;
    text-align: justify;
    height: 32px;
    line-height: 32px;
  }
  .itemTitle::after {
    content: '';
    display: inline-block;
    padding-left: 100%;
  }
}
</style>
